<template>

    <div class="table1_container">
        <div class="table1_dataShower" style="padding-bottom: 50px; padding-top: 50px; box-sizing: border-box">
            <button class="report-top-button" @click="back">返回上级页面</button>
            <div style="text-align: center; margin: 10px 0;">
                <div style="display: inline-flex; gap: 20px;">
                    <!-- 未完成 -->
                    <div style="display: flex; align-items: center;">
                        <div
                            style="width: 16px; height: 16px; background-color: #ffffff; border: 1px solid #ddd; margin-right: 5px;" />
                        <span>未完成</span>
                    </div>

                    <!-- 已完成 -->
                    <div style="display: flex; align-items: center;">
                        <div
                            style="width: 16px; height: 16px; background-color: #e6f7e6; border: 1px solid #ddd; margin-right: 5px;" />
                        <span>已完成</span>
                    </div>

                    <!-- 不合格重采 -->
                    <div style="display: flex; align-items: center;">
                        <div
                            style="width: 16px; height: 16px; background-color: #ffebeb; border: 1px solid #ddd; margin-right: 5px;" />
                        <span>不合格重采</span>
                    </div>
                </div>
            </div>
            <h1>钢筋材质试验报告汇总表</h1>
            <div class="signature-content" style="margin-bottom: 10px;">
                <span>
                    工程名称：郑州市第二人民医院东院区改扩建项目眼科综合楼#学生宿舍
                </span>
                <span>
                    &nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日
                </span>
                <span>共1页</span>
                <span>第1页</span>
            </div>
            <div class="table-scroll-wrapper">
                <table class="wendu-table1_top_table">
                    <tr>
                        <td rowspan="2">批次</td>
                        <td rowspan="2" colspan="2">钢筋种类</td>
                        <td rowspan="2" colspan="2">生产厂家</td>
                        <td rowspan="2" colspan="2">炉批号</td>
                        <td rowspan="2" colspan="2">公称直径</td>
                        <td rowspan="2" colspan="2">抗震等级</td>
                        <td rowspan="2" colspan="2">进场批量</td>
                        <td rowspan="2" colspan="2">送检数量（组）</td>
                        <td rowspan="2" colspan="4">本单位工程数量(吨)</td>
                        <td rowspan="2" colspan="2">使用部位</td>
                        <td rowspan="2" colspan="4">本组试件代表数量（吨）</td>
                        <td rowspan="2" colspan="2">进场日期</td>
                        <td rowspan="2" colspan="2">见证日期</td>
                        <td rowspan="2" colspan="2">送样日期</td>
                        <td rowspan="2" colspan="2">报告日期</td>
                        <td rowspan="2" colspan="2">试验报告编号</td>
                        <td rowspan="2" colspan="2">重量偏差(%)</td>
                        <td rowspan="1" colspan="12">力 学 性 能</td>
                        <td rowspan="1" colspan="6">弯 曲 性 能</td>
                        <td rowspan="2" colspan="2">结论</td>
                        <td rowspan="2" colspan="2">项目名称</td>
                        <td rowspan="2" colspan="2">单位工程(栋)</td>
                        <td rowspan="2">主键</td>
                        <td rowspan="2">验收规范</td>
                        <td rowspan="2">工程号</td>
                        <td rowspan="2">监督号</td>
                        <td rowspan="2">检测单位</td>
                        <td rowspan="2">委托单位</td>
                        <td rowspan="2">委托编号</td>
                        <td rowspan="2">见证单位</td>
                        <td rowspan="2">见证人</td>
                        <td rowspan="2">送样人</td>
                        <td rowspan="2">检验类别</td>
                        <td rowspan="2">建设单位</td>
                        <td rowspan="2">施工单位</td>
                    </tr>
                    <tr>
                        <td rowspan="1" colspan="2">屈服强度(MPa)</td>
                        <td rowspan="1" colspan="2">抗拉强度(MPa)</td>
                        <td rowspan="1" colspan="2">伸长率(%)</td>
                        <td rowspan="1" colspan="2">总伸长率(%)</td>
                        <td rowspan="1" colspan="2">强屈比</td>
                        <td rowspan="1" colspan="2">屈标比</td>
                        <td rowspan="1" colspan="2">弯曲压头直径(mm)</td>
                        <td rowspan="1" colspan="2">弯曲角度(°)</td>
                        <td rowspan="1" colspan="2">结果</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td colspan="4"></td>
                        <td colspan="2"></td>
                        <td colspan="4"></td>
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div class="signature-content" style="margin-top: 20px;">
                <span>总监理工程师(建设单位项目技术负责人)：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span>（监理项目部章）&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span>填表人：xxx</span>
            </div>
        </div>
    </div>
</template>

<script>
import router from '@/router'
import { searchInpsectCheckPreview } from '@/api/statementManage'

/*
 *    这个报表真麻烦！！！
 *
 */

export default {
    data() {
        return {
            localStorageId: '',
            reportData: {},
            previewData: {}
        }
    },
    async mounted() { // 钩子函数
        // 从localstorage中拿数据
        const localStorageId = this.$route.query.localStorageId
        this.localStorageId = localStorageId // 保存id用于销毁时清理
        if (localStorageId) {
            const data = localStorage.getItem(localStorageId)
            if (data) {
                this.reportData = JSON.parse(data)
                console.log(this.reportData)
            }
        }

        // // 赶紧从接口拿数据
        // try {
        //   const { result } = await searchInpsectCheckPreview(this.reportData.taskId)
        //   console.log(result)
        //   this.previewData = result
        //   console.log(this.previewData)
        //   this.$message.success('报表已生成！')
        // } catch (err) {
        //   this.$message.error('报表生成失败！')
        // }
    },
    beforeDestroy() { // 离开页面要做的事
        // 那就是清除localstorage！！！
        if (this.localStorageId) {
            localStorage.removeItem(this.localStorageId)
        }
        document.querySelector('body').setAttribute('style', 'background-color: white;') // 还原，因为这是个全局样式
    },
    beforeCreate() {
        document.querySelector('body').setAttribute('style', 'background-color:#f5f5f5;') // 设置对比色
    },
    methods: {
        back() {
            this.$router.go(-1)
        }
    }
}
</script>

<style>
/*
先来设置每个任务项对应的背景颜色吧！
 */
.row-unfinished {
    background-color: #ffffff;
    /* 未完成 - 白色或默认色 */
}

.row-finished {
    background-color: #e6f7e6;
    /* 已完成 - 浅绿色 */
}

.row-failed {
    background-color: #ffebeb;
    /* 不合格重采 - 浅红色 */
}

.table1_container {
    width: 80%;
    background: white;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-bottom: 20px;
}

.table1_dataShower {
    width: 80%;
    background: white;
    margin: 0 auto;
    border: 2px black solid;
}

.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wendu-table1_top_table {
    width: max-content;
    /* 按内容撑开 */
    min-width: 100%;
    /* 在宽屏时至少填满容器 */
    margin: 0;
    /* 不需要 auto 居中，scroll wrapper 决定显示 */
    table-layout: auto;
    /* 根据内容决定列宽 */
}

/*这是返回按钮的样式*/
.report-top-button {
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Arial', sans-serif;
    color: #ffffff;
    background: linear-gradient(90deg, #1e3a8a, #3b82f6);
    /* 建筑行业蓝色调，稳重且有活力 */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.report-top-button:hover {
    background: linear-gradient(90deg, #1e3a8a, #2563eb);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.report-top-button:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
}

/*表格样式*/
.wendu-table1_top_table {
    width: max-content;
    margin: 0 auto;
    border-collapse: collapse;
    border: 1px solid black;
    table-layout: fixed;
}

/*表格的样式*/
.wendu-table1_top_table tr td {
    height: 50px;
    border: 1px solid black;
    word-wrap: break-word;
    /* 允许长单词换行 */
    overflow-wrap: break-word;
    /* 更现代的换行属性 */
}

#table1_top_table_last_col {
    width: 20%;
    min-height: 50px;
}

th {
    box-sizing: border-box !important;
}

.signature-content {
    display: flex;
    align-items: center;
    /* 垂直居中对齐（可选） */
    justify-content: space-between;
    /* 左右两端对齐 */
    gap: 12px;
    /* 子项间距，可选 */
    width: 100%;
}
</style>
